<template>
  <div>
    <h1>detail</h1>
    <!-- <h1>{{ $route.query.stu_id }}</h1> -->
    <h1>{{ $route.params.stu_id }}</h1>
    <h1>{{ itemStu.name }}</h1>
    <h1>{{ itemStu.hobby }}</h1>
    <h1>{{ itemStu.money }}</h1>
  </div>
</template>

<script>
/* 
当我们点击汪涵 跳转页面  detail  
需要将汪涵的stu_id 传递到detail
从detail当中的数据 list_item当中筛选出stu_id为1

筛选出的来item(汪涵的信息) 渲染到detail template当中

1.search 将stu_id传递给detail 路由组件传值
query   ?key=value&key=value
params  /值/值 使用params注册时一定要有占位符

2.如何获取传递过来stu_id
$route.query.stu_id
$route.params.stu_id


3.获取到值进行list_item的数组筛选



*/

export default {
  data() {
    return {
      list_item: [
        {
          stu_id: 1,
          name: "汪涵",
          hobby: "打游戏，敲代码，帅奇",
          money: "1亿",
        },
        {
          stu_id: 2,
          name: "洋洋",
          hobby: "软饭硬吃，性别男爱好女",
          money: "120亿",
        },
        {
          stu_id: 3,
          name: "孙伟",
          hobby: "洋洋，哲书，都是好朋友",
          money: "5000万",
        },
      ],
      itemStu: {},
    };
  },
  mounted() {
    this.getDetailItem();
  },
  methods: {
    getDetailItem() {
      //   获取对应的学号的详情
      console.log("xxx");
      console.log(this.$route.params);
      //获取stu_id  根据stu_id从list_item数组删选stu_id
      let item = this.list_item.find((item) => {
        return item.stu_id == this.$route.params.stu_id;
      });
      //   console.log(item);
      this.itemStu = item;
    },
  },
  watch: {
    $route(value) {
      console.log(value);
      //当每次点击汪涵 洋洋 孙伟  $route都发生了变化 watch可以监视到它的变化  $route 咱们就在进行一次删选
      let item = this.list_item.find((item) => {
        return item.stu_id == value.params.stu_id;
      });
      this.itemStu = item;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>